<template>
    <el-card class="box-card">
        <div v-html="compiledMarkdown"></div>
    </el-card>
</template>

<script>
    import {marked} from 'marked'
    import hljs from "highlight.js"; // 引入 highlight.js
    import "highlight.js/styles/github-dark-dimmed.css"; // 引入高亮样式 这里我用的是sublime样式

    marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: function (content) {
            return hljs.highlightAuto(content).value;
        },
        headerIds: true,
        gfm: true,//默认为true。 允许 Git Hub标准的markdown.
        tables: true,//默认为true。 允许支持表格语法。该选项要求 gfm 为true。
        breaks: false,//默认为false。 允许回车换行。该选项要求 gfm 为true。
        pedantic: false,//默认为false。 尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
        sanitize: false,//对输出进行过滤（清理）
        smartLists: true,
        smartypants: false//使用更为时髦的标点，比如在引用语法中加入破折号。
    })

    export default {
        name: "BlogDetail",
        data() {
            return {
                content: "",
            }
        },
        computed: {
            compiledMarkdown: function () {
                return marked(this.content, {sanitize: false})
                    .replace(/<pre>/g, "<pre class='hljs' style='overflow: auto;padding: 20px;'>")
                    .replace(/<img/g,"<img style='width: 100%; '");
            },
        },
        mounted() {
            this.content = this.$route.params.content;
        }
    }
</script>

<style scoped>
    @import "~highlight.js/styles/github-dark-dimmed.css";
    .box-card {
        text-align: left;
        line-height: 20px;
        font-size: 18px;
    }

</style>